/* remove the gap on top of the whole page and remove curved borders (apparently the curved borders is only visible in this theme despite being in the og css?)*/
.xb-page-wrapper {
padding-top: 0;
margin: auto;
border-radius: 0;
}
/* site header */
.p-nav {
background: #d2dff0;
}
/* header buttons */
/* move the header buttons a bit away from the logo */
.p-nav .p-nav-scroller {
padding: 0px 0px 0px 25px;
}
.p-nav-list>.navmembers>.p-navEl {
border-radius: 0 5px 0 0;
}
.p-nav-list>.navforums>.p-navEl {
border-radius: 5px 0 0 0;
}
.p-nav-list>.navhb_chat>.p-navEl,
.p-nav-list>.navwhatsNew>.p-navEl {
border-radius: 0;
}
.p-nav-list .p-navEl {
background: white;
}
.p-nav a {
color: #718aaa !important;
}
.p-navEl a:hover {
background: none !important;
}
/* buttons selected */
.p-nav-list .p-navEl.is-selected {
background: white;
border-radius: 5px 5px 0 0;
border-bottom: none;
box-shadow: none;
padding-top: 4px;
}
/* buttons hoverd / active for drop down menus */
.p-nav-list .p-navEl:hover,
.p-nav-list li:hover,
.p-nav-list .p-navEl.is-menuOpen {
background: #bfd4f2 !important;
border-radius: 5px 5px 0 0;
transition: all 0.2s linear 0s;
box-shadow: none;
}
.p-nav-list .p-navEl.is-menuOpen a {
color: #718aaa !important;
}
/* lift the menu with profile, alerts,... a bit so the style variation icon won't get cut off */
.p-nav-opposite {
background: white;
border-radius: 5px 5px 0 0;
padding-bottom: 2px;
}
/* the bar right below site header with buttons */
.p-sectionLinks {
background: #edf4fc !important;
background-image: -webkit-linear-gradient(top, white 35px, #cfcece) !important;
box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%, .14), 0 3px 1px -2px hsla(0, 0%, 0%, .12), 0 1px 5px 0 hsla(0, 0%, 0%, .2);
position: relative;
z-index: 10;
}
/* add some extra space between buttons */
.p-sectionLinks-list>li {
padding-left: 3px;
}
.p-sectionLinks-list a {
color: #718aaa !important;
/*color: #747474 !important;*/
}
.p-sectionLinks-list a:hover {
text-decoration: none;
}
/* random.txt (moving to middle) */
.hb-quotes {
color: #718aaa;
text-align: center;
margin: 12px auto 8px auto;
font-size: 0.9em;
}
/* outermost bg of the site body, background behind side blocks in homepage */
.p-body-inner,
.p-body-sidebar .block .block-container,
.p-body-sideNavContent .block .block-container {
background: #edf4fc;
/*background: #d5e1f166;
backdrop-filter: blur(8px);*/
}
/* remove the bottom border in block headers */
.block-header,
.p-body-pageContent .block .block-minorHeader {
border-bottom: none;
}
/* icons, titles for blocks, side blocks and community features in homepage */
.block-minorHeader a,
.block-header a,
.p-body-sidebar .block .block-minorHeader:before,
.p-body-sideNavContent .block .block-minorHeader:before {
color: #718aaa !important;
}
.block-header a:hover,
.block-minorHeader a:hover {
text-shadow: 0 0 5px #edf4fc;
text-decoration: none !important;
}
/* blocks body */
.block-body {
color: #718aaa;
background: #edf4fc;
/*background: #edf4fccc;
backdrop-filter: blur(8px)*/
;
}
/* items bg hovered */
.structItemContainer-group .structItem:hover,
.structItemContainer .structItem:hover,
.block-body>.block-row:hover,
.block-body.block-row:hover,
.node:hover,
.node+.node:nth-child(even):hover,
.structItemContainer .structItemContainer-group .structItem:nth-child(even):not(.is-mod-selected):hover {
background-color: #b2caeb66;
transition: all 0.2s linear 0s;
}
/* titles, subtitles in items, titles in watched threads */
.node-title a,
.structItem-title a,
.structItem-subtitle {
color: #718aaa !important;
}
/* username and reply count in side blocks */
.contentRow-minor {
color: #718aaa;
}
/* title icons for block items in homepage except talk to staff */
.block--category {
--link-color: #718aaa;
}
/* talk to staff icon */
.node-icon i {
color: #718aaa;
}
/* thread preview when hovering on title */
.tooltip--preview .tooltip-content {
background: #edf4fccc;
backdrop-filter: blur(6px);
border: 1px solid #d5e1f1;
border-radius: 4px;
color: #718aaa;
}
/* page jump buttons */
.structItem-pageJump a {
opacity: 1;
color: #718aaa !important;
background: #d2dff0;
background-image: -webkit-linear-gradient(top, white 7px, #ccddef);
border: 1px solid #ccc;
border-radius: 0;
}
.structItem-pageJump a:hover {
background: #bfd4f2;
transition: all 0.2s linear 0s;
}
/* icons like polls and thread watched */
.structItem-status.fa--xf svg,
.structItem-status--solved::before,
.structItem-status--sticky::before,
.structItem-status--watched::before {
color: #718aaa;
}
/* stats in items */
.structItem-cell.structItem-cell--meta .pairs,
.structItem-cell.structItem-cell--main .structItem-minor {
color: #9ab8d1;
}
/* border between items */
.structItemContainer-group .structItem:not(:first-child),
.structItemContainer-group .block-row:not(:first-child) .structItem,
.structItemContainer .structItem:not(:first-child),
.node+.node {
border-top: 2px dashed #aabdd5;
}
/* removes the old border */
.structItem {
border-top: none;
}
/* even items in blocks have a different bg color but i don't need it atm */
.node+.node:nth-child(even),
.structItemContainer .structItemContainer-group .structItem:nth-child(even):not(.is-mod-selected) {
background-color: #edf4fc
}
/* self explainatory */
.block-header,
.block-footer {
color: #718aaa;
background: #edf4fc;
border-top: none;
}
/* make some space between footer and body to prevent things like polls having its body cut off at the bottom */
.block-footer {
margin-top: 5px;
}
/* ? */
.block-header .block-desc {
color: #879fbd;
font-size: 0.87em;
}
/* menus like search, alert, messages */
.menu-arrow {
border-bottom-color: #bfd4f2;
}
/* menu header, blocks and side blocks headers, headers in overlays (popups) */
/* z-index just use an arbitrary value to make sure it stays above everything else */
/* text color only applies to menus and some side blocks */
.menu-header,
.block-minorHeader,
.p-body-sidebar .block .block-minorHeader,
.p-body-sideNavContent .block .block-minorHeader,
.p-body-pageContent .block .block-minorHeader,
.block-header,
.overlay>.overlay-title:first-child,
.overlay .overlay-firstChild {
color: #718aaa;
border-bottom: none;
border-radius: 8px 8px 0 0 !important;
background-image: -webkit-linear-gradient(top, white, #a6c3e1, #c5d7eb, #e4f1f7) !important;
box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%, .14), 0 3px 1px -2px hsla(0, 0%, 0%, .12), 0 1px 5px 0 hsla(0, 0%, 0%, .2);
position: relative;
z-index: 10;
}
/* used for custom title text for current user's profile but could also be for something else */
.menu-row.menu-row--alt {
color: #718aaa;
}
.menu-content {
color: #718aaa;
background: #edf4fccc;
backdrop-filter: blur(6px);
border-width: 0;
}
.menu-content:has(.menu-header) {
border-radius: 8px 8px 0 0 !important;
}
/* menu row, block link (looks like menu row but for dedicated pages?) */
.menu-linkRow,
.blockLink {
color: #718aaa !important;
}
/* menu row, block link hovered / selected */
.menu-linkRow.is-selected,
.menu-linkRow.is-selected.is-selected,
.menu-linkRow:hover,
.menu-linkRow:hover.is-selected,
.menu-linkRow:focus,
.menu-linkRow:focus.is-selected,
.menu-row.menu-row--clickable:hover,
.blockLink:hover,
.blockLink.is-selected {
background: #b2caeb66;
border-left-color: #aabdd5;
transition: all 0.2s linear 0s;
}
.menu-footer {
background: #edf4fccc;
backdrop-filter: blur(6px);
border-color: #aabdd5;
border-width: 2px;
border-top-style: dashed;
border-radius: 0 0 8px 8px;
}
/* menu text input */
.input,
.fr-popup .fr-input-line input[type="text"], .fr-popup .fr-input-line textarea {
background: #edf4fc !important;
border-color: #aabdd5 !important;
color: #718aaa;
}
/* menu, profile message, input placeholder */
.input::placeholder,
.u-muted {
color: #b0c3d4 !important;
}
/* color for checkbox, radio button,... */
.XenBase label.iconic i,
.XenBase label.iconic:hover>input+i {
color: #718aaa;
}
/* unread alerts (same as hovered, which is covered in menu row)*/
.alert.is-unread {
color: #718aaa;
background: #b2caeb66;
}
/* hover effect for alerts in their dedicated page */
.alert.block-row:hover {
background: #b2caeb66;
transition: all 0.2s linear 0s;
}
/* border between alerts in their dedicated page */
.block-row.block-row--separated+.block-row {
border-top: 2px dashed #aabdd5;
}
/* alert border new post */
.alert .contentRow.alert-row.alert-action--insert,
.alert .contentRow.alert-row.alert-action--forumwatch_insert,
.alert .contentRow.alert-row.alert-action--other_commenter,
.alert .contentRow.alert-row.alert-action--your_post,
.alert .contentRow.alert-row.alert-action--your_profile {
border-color: #718aaa;
}
/* forms */
.formRow>dt,
.formSubmitRow-bar {
background: #edf4fc;
border: none;
margin-top: 10px;
}
/* form and input explainations / hints */
.formRow .formRow-explain,
.formRow .formRow-hint,
.inputChoices-explain {
color: #718aaa;
}
/* breadcrumb icon */
.p-breadcrumbs li:first-of-type:before {
background-color: #718aaa
}
/* breadcrumbs */
.p-breadcrumbs--parent .p-breadcrumbs a {
color: #718aaa !important;
}
/* thread title, subforum title in their dedictaed pages */
.p-title-value {
color: #718aaa;
}
/* container for things below thread title (username, date posted) only used for icons atm as it all got overidden by the elements inside it */
.p-description {
color: #718aaa;
}
/* forum guidelines */
.hb-rules {
color: #718aaa;
border: 3px solid #aabdd5;
border-radius: 10px;
padding-top: 10px;
padding-left: 10px;
}
/* post container (for content part) */
.block--messages .message .message-cell.message-cell--main {
background: #edf4fc;
border: 3px solid #aabdd5;
border-radius: 8px !important;
}
/* post content */
.message-content {
background-image: linear-gradient(#d2dff052 .1em, transparent .1em);
background-size: 100% 1.2em;
}
/* post text, node text (section desc in main page) */
.block--messages .message,
.block--messages .block-row,
.node-description {
color: #718aaa;
}
/* highlighted posts top border */
/* remove the original border and change highlighted post to having a border around content section instead */
.block--messages .message.hbReact-postmarked.hbReact-postmarked--auto,
.message.hbReact-postmarked.hbReact-postmarked--auto {
border-top: none;
}
/* auto (default highlight) */
.block--messages .message.hbReact-postmarked.hbReact-postmarked--auto>div>div,
.message.hbReact-postmarked.hbReact-postmarked--auto>div>div {
box-shadow: 0 0 15px #6ba65e;
}
/* highlighted by staff */
.block--messages .message.hbReact-postmarked.hbReact-postmarked--feature.hbReact-postmarked--staff>div>div,
.message.hbReact-postmarked.hbReact-postmarked--feature.hbReact-postmarked--staff>div>div {
box-shadow: 0 0 15px #a65e5e;
}
/* fixes prev highlight button being cut off on the right */
.hb-react-highlightPrev {
padding-right: 1px;
}
/* featured notice / moderator notice(?) / thread locked notice */
.message-cell .messageNotice,
.blockStatus {
background-color: #d5e1f1;
color: #718aaa;
border-left: 2px solid #718aaa;
}
/* date posted */
.u-dt {
color: #718aaa;
}
/* notice icon, not for thread lock notice though */
.block--messages .message.hbReact-postmarked .hbReact-messageNotice--featured:before,
.message.hbReact-postmarked .hbReact-messageNotice--featured:before {
background-color: #718aaa;
}
/* spoiler, quote container, block quote (quote with no header) */
.bbCodeBlock,
.fr-view blockquote {
background: white;
border: 2px solid #aabdd5;
border-radius: 8px;
}
/* quote header */
.bbCodeBlock-title {
color: #718aaa;
background-image: -webkit-linear-gradient(top, white, #a6c3e1, #c5d7eb, #e4f1f7);
border-radius: 8px 8px 0 0;
box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%, .14), 0 3px 1px -2px hsla(0, 0%, 0%, .12), 0 1px 5px 0 hsla(0, 0%, 0%, .2);
}
/* quote header link to og post */
.bbCodeBlock-title>a {
color: #718aaa !important;
}
.bbCodeBlock-title>a:hover {
text-shadow: 0 0 5px #edf4fc;
text-decoration: none;
}
/* quote content */
.bbCodeBlock-content {
padding-top: 10px;
}
/* embeded post */
/* TODO: do more work on this */
.embed {
border: 3px solid #aabdd5 !important;
border-radius: 8px;
}
/* border for page break like in ops */
.bbWrapper hr {
border-top: 3px solid #d5e1f1;
}
/* header for attachments section */
.block-textHeader {
color: #718aaa;
}
/* file icons */
.file-typeIcon {
color: #718aaa;
}
/* last edit label */
.message-lastEdit {
color: #718aaa;
}
/* list of user that reacted to post, currently overidden by <a> */
.reactionsBar-link {
color: #8898a7;
}
/* the 'all' tab over reaction overlay */
.block-minorTabHeader .tabs-tab.is-active {
border-color: #87bbf0;
}
/* action bar = container for buttons below a post (report, reaction,... ), border that seperate the description and content like in polls,
menu separator */
.block-separator,
.message-footer .message-actionBar,
.menu-separator {
border-top: 2px dashed #aabdd5;
}
/* reactions / ratings tooltip */
.tooltip--reaction .tooltip-content {
background: #edf4fccc;
backdrop-filter: blur(6px);
border: 1px solid #d5e1f1;
border-radius: 4px;
}
/* poster container next to post, poster container for a&h */
.message-cell.message-cell--user,
.message-cell.message-cell--action,
.message-articleUserInfo {
background: #d5e1f1;
}
/* user stats for a&h (value only) */
/*TODO: find a different color (and for values in general) */
.message-articleUserStats {
color: #718aaa;
}
/* username */
.username {
color: #718aaa !important;
}
/* username in mentions */
/* update this along with link colors if it ever get changed */
.bbWrapper .username {
color: #87bbf0 !important;
}
/* join date label */
.pairs>dt {
color: #718aaa;
}
/* t&h badge */
.userBanner.userBanner--green {
color: #718aaa;
background: #bfd5ec;
border: none;
}
/* user profile, bookmark tooltip */
/* backdrop filter for this is pretty buggy, would often lag / not show up */
/* color is for values text */
.tooltip--member .tooltip-content,
.memberTooltip-header,
.tooltip--bookmark .tooltip-content,
.tooltip--share .tooltip-content {
background: #edf4fccc;
backdrop-filter: blur(6px);
color: #9ab8d1;
border: 1px solid #d5e1f1;
border-radius: 4px;
}
/* add extra space between buttons */
.buttonGroup>.button {
margin-right: 3px;
}
/* new indicator */
.message-newIndicator,
a.message-newIndicator {
background-color: #718aaa;
;
color: white;
}
/* editor outer bg */
.message--quickReply .message-cell.message-cell--main {
background-color: #edf4fc;
}
/* user arrow in editor, would only work when --xf content bg in root is also set to some custom value */
.message-userArrow {
color: #edf4fc;
}
/* editor toolbar */
.fr-box.fr-basic .fr-toolbar.fr-top,
.fr-toolbar .fr-more-toolbar,
.fr-popup .fr-buttons.fr-tabs {
background: #edf4fc !important;
}
/* editor toolbar buttons */
.fr-toolbar .fr-command.fr-btn,
.fr-popup .fr-command.fr-btn,
.fr-modal .fr-command.fr-btn,
.fr-toolbar .fr-command.fr-btn.fr-dropdown,
.fr-popup .fr-command.fr-btn.fr-dropdown,
.fr-modal .fr-command.fr-btn.fr-dropdown {
color: #718aaa;
background: #d2dff0;
border-radius: 0;
}
/* color of dropdown buttons */
.fr-toolbar .fr-command.fr-btn.fr-dropdown:after,
.fr-popup .fr-command.fr-btn.fr-dropdown:after,
.fr-modal .fr-command.fr-btn.fr-dropdown:after {
border-top-color: #718aaa;
}
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:after,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:after,
.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:after {
border-bottom-color: #718aaa;
}
/* button text when disabled */
.fr-toolbar .fr-command.fr-btn.fr-disabled,
.fr-popup .fr-command.fr-btn.fr-disabled,
.fr-modal .fr-command.fr-btn.fr-disabled {
color: #bdbdbd;
}
/* editor toolbar buttons hovered / active */
.fr-toolbar.fr-ltr.fr-desktop.fr-top.fr-basic>div>button:hover,
.fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active),
.fr-toolbar .fr-command.fr-btn.is-menuOpen,
.fr-toolbar .fr-command.fr-btn.fr-active:not(.fr-disabled),
.fr-toolbar .fr-command.fr-btn.fr-btn-active-popup,
.fr-popup .fr-command.fr-btn.fr-btn-active-popup,
.fr-modal .fr-command.fr-btn.fr-btn-active-popup,
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-modal .fr-command.fr-btn.fr-dropdown.fr-active {
color: #718aaa !important;
background: #bfd4f2 !important;
transition: all 0.2s linear 0s;
}
/* drop down menus */
.fr-command.fr-btn+.fr-dropdown-menu {
background: #edf4fc80;
backdrop-filter: blur(6px);
}
.fr-command.fr-btn+.fr-dropdown-menu a {
color: #718aaa !important;
}
.fr-desktop .fr-command:hover:not(.fr-table-cell),
.fr-desktop .fr-command:focus:not(.fr-table-cell),
.fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell),
.fr-desktop .fr-command.fr-expanded:not(.fr-table-cell),
.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
background: #b2caeb66;
transition: all 0.2s linear 0s;
}
/* pop up menus */
.fr-popup {
background: #edf4fc80;
backdrop-filter: blur(6px);
color: #718aaa;
}
/* bg for search bar in emoji menu */
.menu-row.menu-row--alt {
background: #edf4fccc;
backdrop-filter: blur(6px);
}
/* header text for emoji menu */
.menu--emoji .menu-header,
.menu--gif .menu-header {
color: #718aaa;
}
/* make those 3 dots buttons have the same opacity as other buttons */
.fr-toolbar .fr-command.fr-btn[data-cmd^="more"] {
opacity: 1;
}
/* removes the random border below preview button */
.fr-toolbar .fr-btn-grp.rte-tab--inactive,
.block-filterBar {
border-bottom: none;
}
/* editor textbox */
.fr-box.fr-basic,
.fr-box.fr-basic.is-focused {
background: #edf4fc;
background-image: linear-gradient(#d2dff052 .1em, transparent .1em);
background-size: 100% 1.2em;
border: none;
}
/* editor textbox wrapper */
.fr-box.fr-basic.fr-top .fr-wrapper {
border: 3px solid #aabdd5;
border-radius: 8px;
}
/* editor textbox text*/
.fr-box.fr-basic .fr-element,
.fr-box.fr-basic.is-focused .fr-element {
color: #718aaa;
}
/* editor textbox placeholder */
.fr-wrapper .fr-placeholder {
color: #b0c3d4;
}
.attachmentUploads-banner {
background-color: #edf4fc;
}
/* preview button, post button, post thread button, attach button, page buttons, menu buttons, header buttons (p-nav-list),... */
.p-sectionLinks-list .p-navEl,
.pageNav-page,
.pageNav-page>a,
.pageNav-jump,
.button.button--link,
a.button.button--link,
.button.bbCodeSpoiler-button,
.button,
a.button,
.button.button--primary,
a.button.button--primary,
.fr-toolbar .fr-btn-grp.rte-tab--preview .fr-command.fr-btn,
.inputGroup.inputGroup--joined .inputGroup-text,
.button.button--cta,
a.button.button--cta,
.fr-popup .fr-action-buttons button.fr-command {
background: #d2dff0;
color: #718aaa !important;
background-image: -webkit-linear-gradient(top, white 10px, #ccddef);
/*color: #747474 !important;
background-image: -webkit-linear-gradient(top, white 10px, #c2c2c2);*/
border: 1px solid #ccc;
box-shadow: none;
}
/* those buttons hovered / active */
.p-sectionLinks-list .p-navEl:hover,
.p-sectionLinks-list .p-navEl.is-menuOpen,
.p-navgroup-link:hover,
.p-navgroup-link.is-menuOpen,
.pageNav-page:hover,
.pageNav-page>a:hover,
.pageNav-page.pageNav-page--current,
.pageNav-page.pageNav-page--current>a,
.pageNav-page.pageNav-page--current:hover,
.pageNav-jump:hover,
.button:hover,
a.button:hover,
.button.button--primary:hover,
a.button.button--primary:hover,
.inputGroup.inputGroup--joined .inputGroup-text:hover,
.fr-popup .fr-action-buttons button.fr-command:hover {
color: #718aaa !important;
background: #bfd4f2 !important;
box-shadow: none;
transition: all 0.2s linear 0s;
}
a {
color: #87bbf0 !important;
}
:root {
--xf-contentBg: #edf4fc;
}
/* tooltips (doesn't cover those in editor toolbar) */
.tooltip--basic .tooltip-content {
background-color: #718aaa;
}
.tooltip--basic .tooltip-content a {
color: white !important;
}
/* tab buttons */
.block-tabHeader,
.tabs--standalone,
.menu-tabHeader {
background: #d2dff0;
background-image: -webkit-linear-gradient(top, white 10px, #ccddef);
}
.block-tabHeader a,
.tabs--standalone a,
.menu-tabHeader a {
color: #718aaa !important;
}
.block-tabHeader .tabs-tab:not(.is-readonly):hover,
.block-tabHeader .tabs-tab.is-active,
.tabs--standalone .tabs-tab:hover,
.tabs--standalone .tabs-tab.is-active,
.menu-tabHeader .tabs-tab:hover,
.menu-tabHeader .tabs-tab.is-active {
background: #bfd4f2;
border-color: #bfd4f2;
transition: all 0.2s linear 0s;
}
/* "see more" buttons in members page (originally a link but i turned it to a button) */
.memberOverviewBlock-seeMore {
background: #d2dff0;
background-image: -webkit-linear-gradient(top, white 10px, #ccddef);
border: 1px solid #ccc;
transition: all 0.2s linear 0s;
}
.memberOverviewBlock-seeMore a {
color: #718aaa !important;
}
.memberOverviewBlock-seeMore:hover {
background: #bfd4f2;
transition: all 0.2s linear 0s;
}
.memberOverviewBlock-seeMore a:hover {
text-decoration: none;
}
/* profile message text */
.bbWrapper {
color: #718aaa;
}
/* profile message input bg */
.message-responseRow {
background: #edf4fc;
}
/* overlays */
.overlay-titleCloser:after {
color: #718aaa;
}
.overlay-title {
color: #718aaa;
}
.overlay {
background: #edf4fc;
color: #718aaa;
}
/* poll overlays */
.pollResult.pollResult--showVoters:hover {
background: #b2caeb66;
}
/* seen in things like error page */
.blockMessage {
color: #718aaa;
}
/* make the 'click to expand' part of a&h articles looks the same as those of quotes */
.message-expandLink {
background: linear-gradient(to bottom, hsla(var(--xf-contentAltBg--h), var(--xf-contentAltBg--s), var(--xf-contentAltBg--l), 0%) 0%, hsla(var(--xf-contentAltBg)) 80%);
font-family: QuattrocentoKF, "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
/* change footer text to white so it's visible in the comic bg in light mode */
.p-footer-copyright {
color: white;
}
/* off canvas menu for mobile */
.offCanvasMenu--nav .offCanvasMenu-header {
border-radius: 8px 8px 0 0 !important;
background-image: -webkit-linear-gradient(top, white, #a6c3e1, #c5d7eb, #e4f1f7) !important;
box-shadow: 0 2px 2px 0 hsla(0, 0%, 0%, .14), 0 3px 1px -2px hsla(0, 0%, 0%, .12), 0 1px 5px 0 hsla(0, 0%, 0%, .2);
}
/* give the close button the same effect as those of overlays */
.offCanvasMenu .offCanvasMenu-closer {
opacity: .5;
}
.offCanvasMenu .offCanvasMenu-closer:hover {
opacity: 1;
}
.XenBase .offCanvasMenu--nav .offCanvasMenu-content {
color: #718aaa;
background: #edf4fccc;
backdrop-filter: blur(6px);
}
.offCanvasMenu--nav .offCanvasMenu-content a {
color: #718aaa !important;
}
.offCanvasMenu--nav .offCanvasMenu-linkHolder:hover,
.offCanvasMenu--nav .offCanvasMenu-linkHolder.is-selected,
.offCanvasMenu-subList li:hover {
background-color: #b2caeb66;
transition: all 0.2s linear 0s;
}
/* from other users */
/* notification badge (elem found by @Slav Power)*/
.badge.badge--highlighted,
.badgeContainer.badgeContainer--highlighted:after {
background-color: #718aaa;
;
border-radius: 4px;
}
/* remove the excess chevron of breadcrumbs (by @Wol) */
.p-breadcrumbs li:last-of-type::after {
display: none;
}
. I'll buy T&H and everything, 
. It's my fucking dream theme...
Now this looks fun! Maybe I'll think of some stuff to make.
