What is this?
This theme was developed by Kilerpoyo to be used in conjunction with tales and GOI articles written about and for the Valravn Corporation GOI.
This theme is a modified extension of the Present Malice theme by JackalRelated.
Theme Colors
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
On any wiki:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:present-malice]]
[[include :scp-wiki:theme:valravn]]
I recommend using this theme with Woedenaz's BHL Toggle Sidebar. If you want it removed, simply remove its include above.
Examples
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
Just use your imagination and pretend there's `Lorem Ipsum` here.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
"Pleasure doing business with you, may you uh… dine on the playing field?"
caw caw caw!
Gondul was here
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
And another1
This is a | table |
---|---|
You should know | how to make these |
already |
THE HEADER FONT IS COMIC RUNES
The Title font is Courier Prime.
The Body font is Jost.
The Monospace font used is Anonymous Pro.
THE DECORATIVE FONTS USED ARE ODINS SPEAR.
and ODINS SPEAR RAGGED HOLLOW.
/* Valravn's Theme [2022 Wikidot Theme] by Kilerpoyo an extension of the Present Malice Theme by JackalRelated */ @import url('https://scp-wiki.wikidot.com/local--files/theme:valravn/nocurves.css'); @import url('https://scp-wiki.wikidot.com/local--files/theme:valravn/odinspear.css'); @import url('https://scp-wiki.wikidot.com/local--files/theme:valravn/comic-runes.css'); :root { --theme-id: "valravn"; --theme-name: "Valravn Corporation Theme"; --logo-image: url("http://scp-wiki.wikidot.com/local--files/theme:valravn/valwhite") !important; --header-title: "VALRAVN CORPORATION"; --header-subtitle: "We feast on the Battlefield."; /* Valravn theme palette */ --nordic-seaweed: 1, 58, 64; --pax-vikinga: 17, 95, 105; --black-raven: 20, 20, 20; --white-raven: 234, 238, 239; --blue-raven: 12, 185, 204; --mistral-mithril: 151, 144, 102; --sundowner-silver: 146, 166, 165; --monsoon-aurora: 20, 180, 204; --jotun-blue: 8, 143, 143; --dirty-mithril: 134, 127, 91; --bright-mithril: 118, 108, 50; /* Typefaces */ --header-font: 'comic_runesregular', 'nocurvesboustrophedonregular'; --decorative-font: 'odins_spearregular', Verdana; --decorative-font2: 'odins_spear_ragged_hollowRg', Verdana; /* Replace Present Malice vars with Valravn vars */ --light-stars-blue: var(--mistral-mithril); --medium-stars-blue: var(--nordic-seaweed); --dark-stars-blue: var(--pax-vikinga); --chris-blood: var(--pax-vikinga); --umbrella-red: var(--pax-vikinga); --barry-magnum: var(--white-raven); --werskers-shades: var(--black-raven); --jills-shoulderpads: var(--nordic-seaweed); /* Extra tweaks */ --dark-accent: var(--nordic-seaweed); --visited-link-color: var(--pax-vikinga); --link-color: var(--jotun-blue); --rating-module-button-plus-color: var(--monsoon-aurora); --swatch-topmenu-bg-color: var(--mistral-mithril); --swatch-topmenu-border-color: var(--mistral-mithril); } #top-bar { --topmenu-category-hover-bg: var(--bright-mithril); --topmenu-hover-border-color: var(--dirty-mithril); --dropdown-bg-color: var(--nordic-seaweed), 0.9; } #header { --swatch-headerh1-color: var(--white-raven); --login-username-color: var(--white-raven); } #side-bar { --sidebar-resources-bg-color: var(--nordic-seaweed); --sidebar-media-bg-color: transparent; } #main-content { --tabs-bg: var(--nordic-seaweed); --tabs-selected-bg: var(--pax-vikinga); --tabs-selected-outline: var(--pax-vikinga); --tabs-hover-bg: var(--mistral-mithril); --tables-header-bg: var(--mistral-mithril); --footnotes-footer-bg-color: var(--white-raven); --tables-body-bg: var(--sundowner-silver), 0.25; } .yui-navset .yui-content { background-color: rgba(var(--white-raven)); } #footer { --footer-bg-color: var(--mistral-mithril); } /* Paper note component */ .papernote { background-color: rgba(var(--white-raven)); color: rgba(var(--black-raven)) !important; padding: 0.1rem 0.5rem 0.5rem 0.5rem; box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 30%); margin-left: 0.5em; margin-right: 0.5em; } /* Image block component */ .scp-image-block{ color: rgba(var(--white-raven)) !important; } /* Simple terminal component */ .danke { padding: 5px; margin-bottom: 10px; font-family: monospace; font-size: 1.1em; } .agent { background-color: rgba(var(--black-raven)); border: 3px solid rgba(var(--monsoon-aurora)); color: rgba(var(--monsoon-aurora)); } .site { background-color: rgba(var(--black-raven)); border: 3px solid rgba(var(--monsoon-aurora)); color: rgba(var(--monsoon-aurora)); }
What is this?
The Present Malice theme is a light theme for BHL visually based off of the 1996 survival horror videogame series Resident Evil. You can use it for any article… but preferably one with a sort of a "cold scientists research - and exploit - the unimaginable" vibe. Or if you like Resident Evil, of course.
Theme Colors
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.
On any wiki:
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:present-malice]]
This theme also has code for Woedenaz's BHL Toggle Sidebar. If you want it removed, simply remove its include above.
This theme has code for Woedenaz's BHL Centered Header. If you want to add it, simply add:
[[include :scp-wiki:component:centered-header-bhl |malice=--]]]
after all of the includes above.
Examples
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
Just use your imagination and pretend there's `Lorem Ipsum` here.
Hey look, more text here.
How quaint.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
This is a long tab. It contains a lot of text.
"I have this!"
something something Jill Sandwich
Will you use the INK RIBBON? [YES/NO]
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
And another2
This is a | table |
---|---|
You should know | how to make these |
already |
The Header font is Anton.
The Title font is Courier Prime.
The Body font is Jost.
The Monospace font used is Anonymous Pro.
/* Present Malice Theme [2021 Wikidot Theme] by JackalRelated greatly inspired by Resident Evil (1996) */ @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Anton&family=Jost&family=Anonymous+Pro&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&display=swap'); :root { --theme-base: "black-highlighter"; --theme-id: "present-malice"; --theme-name: "Present Malice Theme"; --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:present-malice/umbrella-scp.png") !important; --header-title: "SCP FOUNDATION"; --header-subtitle: "SECURE. CONTAIN. PROTECT."; --body-font: 'Jost', sans-serif; --header-font: 'Anton', sans-serif; --title-font: 'Courier Prime', sans-serif; --mono-font: 'Anonymous Pro', monospace; --UI-font: var(--body-font); /* WHITE - GREY - BLACK */ --tyrant-white: 240, 235, 235; --barry-magnum: 230, 230, 230; --jill-grey: 198, 205, 215; --pecking-crow: 40, 40, 40; --weskers-shades: 20, 20, 20; --mr-x: 5, 5, 5; /* BLUE - GREEN */ --menu-blue: 132, 134, 163; --light-stars-blue: 0, 13, 135; --medium-stars-blue: 42, 45, 102; --dark-stars-blue: 0, 8, 84; --rpd-uniform: 30, 30, 56; --jills-shoulderpads: 20, 20, 36; --chris-green: 11, 138, 0; --woman-drawing-water: 1, 71, 50; /* RED - BROWN */ --chris-blood: 185, 0, 0; --umbrella-red: 143, 0, 0; --ashford-red: 84, 0, 0; --barry-jacket: 165, 51, 51; --rotten-flesh: 82, 54, 42; --itchy-tasty: 126, 64, 38; --rust-rot: 61, 31, 18; /* THEME ASSIGNMENTS */ --white-monochrome: var(--tyrant-white); --pale-gray-monochrome: var(--barry-magnum); --light-gray-monochrome: var(--barry-magnum); --gray-monochrome: var(--weskers-shades); --dark-gray-monochrome: var(--jills-shoulderpads); --black-monochrome: var(--weskers-shades); --pale-accent: var(--barry-jacket); --bright-accent: var(--chris-blood); --medium-accent: var(--umbrella-red); --dark-accent: var(--ashford-red); --swatch-topmenu-bg-color: var(--weskers-shades); --swatch-topmenu-border-color: var(--weskers-shades); --swatch-background: var(--jill-grey); --swatch-border-color: var(--weskers-shades); --swatch-text-dark: var(--mr-x); --swatch-text-light: var(--barry-magnum); --swatch-text-general: var(--swatch-text-dark); --swatch-important-text: var(--bright-accent); --swatch-menubg-color: var(--tyrant-white); --swatch-menubg-light-color: var(--menu-blue); --swatch-menubg-medium-color: var(--rpd-uniform); --swatch-menubg-medium-dark-color: var(--jills-shoulderpads); --swatch-menubg-dark-color: var(--jills-shoulderpads); --swatch-menutxt-dark-color: var(--mr-x); --swatch-menutxt-light-color: var(--barry-magnum); --swatch-secondary-color: var(--jills-shoulderpads); --swatch-text-secondary-color: var(--tyrant-white); --swatch-text-tertiary-color: var(--barry-magnum); --header-gradient-color-top: var(--weskers-shades); --header-gradient-color-middle: var(--weskers-shades); --header-gradient-color-bottom: var(--weskers-shades); --background-gradient-distance: 0rem; --diagonal-stripes: linear-gradient(transparent 0); --sidebar-transition-timing: 0.8s ease-in-out 0.1s; --hover-link-color: var(--chris-blood); --link-color: var(--umbrella-red); --newpage-color: var(--chris-blood); --visited-link-color: var(--ashford-red); --ui-wght: 200; --ui-hvr-wght: 200; --toggle-button-bg: rgb(var(--weskers-shades)); --toggle-border-color: rgb(var(--umbrella-red)); --toggle-icon-color: rgb(var(--tyrant-white)); --toggle-roundness: 0%; } /* HEADER AND TOPBAR */ #header { --swatch-headerh1-color: var(--chris-blood); --swatch-headerh2-color: var(--tyrant-white); --search-icon-color: var(--barry-magnum); --search-icon-hover-color: var(--tyrant-white); --search-icon-hover-bg-color: var(--umbrella-red); --search-textbox-text-color: 0, 0, 0, 0; --search-icon-focus-color: var(--tyrant-white); --search-icon-focus-bg-color: var(--umbrella-red); --search-focus-outline-color: var(--chris-blood); --search-focus-textbox-bg-color: var(--medium-stars-blue); --search-focus-textbox-text-color: var(--barry-magnum); --login-line-divider-color: var(--chris-blood); --login-username-color: var(--chris-blood); --login-myaccount-color: var(--barry-magnum); --login-myaccount-underline-color: var(--umbrella-red); --login-myaccount-hover-bg-color: var(--mr-x); --login-arrow-color: var(--barry-magnum); --login-dropdown-bg-color: var(--jills-shoulderpads); --login-dropdown-bg-image: var(--jills-shoulderpads); --login-dropdown-border-color: var(--mr-x); --login-dropdown-text-color: var(--barry-magnum); --login-dropdown-text-hover-color: var(--tyrant-white); --login-dropdown-bg-hover-color: var(--chris-blood); --login-mobile-icon-color: var(--barry-magnum); --login-mobile-icon-hover-color: var(--tyrant-white); --login-mobile-icon-hover-bg-color: var(--chris-blood); } #header h1 a, #header h1 a:before { --wght: 200; font-weight: 200; } #header h2 span::before { margin-left: -0.2rem; } @media only screen and (max-width: 320px) { #header h2 span::before { margin-left: -0.4rem; } } @media only screen and (max-width: 375px) { #header h2 span::before { margin-left: -0.7rem; } } #top-bar { --topmenu-category-color: var(--barry-magnum); --topmenu-category-hover-color: var(--tyrant-white); --topmenu-category-hover-bg: var(--jills-shoulderpads); --topmenu-hover-border-color: var(--umbrella-red); --mobile-topmenu-sidebar-button-color: var(--barry-magnum); --dropdown-bg-color: var(--rpd-uniform), 0.9; --dropdown-border-color: var(--jills-shoulderpads), 0.5; --dropdown-links-color: var(--barry-magnum); --dropdown-links-hover-color: var(--tyrant-white); --dropdown-links-hover-bg-color: var(--umbrella-red); } /* BREADCRUMBS */ #breadcrumbs a:hover, .pseudocrumbs a:hover, #breadcrumbs a:active, .pseudocrumbs a:active { color: rgb(var(--chris-blood)); text-decoration: none; } #breadcrumbs a:focus-within, .pseudocrumbs a:focus-within { color: rgb(var(--umbrella-red)); text-decoration: none; } /* SCROLLBAR AND SIDEBAR */ html, body { scrollbar-color: rgb(var(--weskers-shades)) rgb(var(--umbrella-red)); } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 18px; background: #transparent; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: rgb(var(--weskers-shades)); } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgb(var(--umbrella-red)); border: rgb(var(--umbrella-red)) 1px solid; border-radius: 0px; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: rgb(var(--chris-blood)); } #side-bar, #interwiki { --sidebar-bg-color: var(--jills-shoulderpads); --sidebar-resources-bg-color: var(--ashford-red); --sidebar-media-bg-color: var(--ashford-red); --sideblock-heading-bg-color: var(--umbrella-red); --sideblock-heading-border-color: var(--chris-blood); --sideblock-heading-text-color: var(--tyrant-white); --sidebar-border-color: var(--rpd-uniform); --sidebar-subtest-color: var(--umbrella-red); --sidebar-links-text: var(--barry-magnum); --sidebar-links-hover-bg-color: var(--chris-blood); --sidebar-links-hover-text-color: var(--tyrant-white); } hr { background-color: rgb(var(--dark-stars-blue)); } .code { background-color: rgb(var(--barry-magnum)); } .scp-image-block .scp-image-caption { border-top: .0625rem outset rgba(var(--umbrella-red), 1); background-color: rgb(var(--barry-magnum)) !important; color: var(--mr-x); } .scp-image-block { box-shadow: none; border: none; } /* MAIN CONTENT */ .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); } .page-rate-widget-box .rate-points { border: none !important; background-color: rgba(0, 0, 0, 0) !important; } #main-content { --tabs-bg: var(--jills-shoulderpads); --tabs-txt: var(--barry-magnum); --tabs-hover-bg: var(--light-stars-blue); --tabs-hover-txt: var(--tyrant-white); --tabs-selected-bg: var(--chris-blood); --tabs-selected-txt: var(--tyrant-white); --tabs-selected-outline: var(--chris-blood); --tabs-bottom-border-color: var(--light-stars-blue); --tabs-content-bg-color: var(--tyrant-white); --tabs-content-border-color: var(--jills-shoulderpads); --tables-header-bg: var(--chris-green); --tables-header-txt: var(--weskers-shades); --tables-border: var(--woman-drawing-water); --tables-body-bg: var(--rpd-uniform), 0.25; --toc-header-bg-color: var(--umbrella-red); --toc-header-text-color: var(--barry-magnum); --toc-header-text-hover-color: var(--tyrant-white); --toc-body-bg-color: var(--rpd-uniform); --toc-body-link-color: var(--barry-magnum); --ui-icon-color: var(--barry-magnum); --ui-icon-bg: var(--jills-shoulderpads); --ui-icon-hover-color: var(--tyrant-white); --ui-icon-hover-bg: var(--chris-blood); --editor-icon-hover-color: var(--tyrant-white); --blockquote-bg-color: var(--tyrant-white), 0.35; --blockquote-border-color: var(--rust-rot); --blockquote-colorbar-color: var(--itchy-tasty); --footnotes-footer-bg-color: var(--menu-blue); --footnotes-footer-colorbar-color: var(--umbrella-red); --footnotes-footer-title-bg-color: var(--umbrella-red); --footnotes-footer-title-text-color: var(--barry-magnum); --pagetags-title-bg: var(--weskers-shades); --pagetags-title-text: var(--barry-magnum); --pagetags-text-color: var(--mr-x); --pagetags-text-hover-color: var(--tyrant-white); --pagetags-text-hover-bg-color: var(--chris-blood); } .blockquote hr, div.blockquote hr { background-color: rgb(var(--rotten-flesh)); } table.wiki-content-table th { font-family: var(--title-font); } :root { --hoverblock-header-bg: var(--chris-blood); --hoverblock-header-txt: var(--tyrant-white); --hoverblock-footer-txt: var(--barry-magnum); --ui-button-hover-bg: var(--chris-blood); --ui-button-hover-txt: var(--tyrant-white); --modal-body-header-text: var(--barry-magnum); --modal-body-text: var(--barry-magnum); --rating-module-button-plus-color: var(--chris-green); --rating-module-button-negative-color: var(--chris-blood); --rating-module-button-cancel-color: var(--itchy-tasty); --rating-module-button-credit-color: var(--tyrant-white); --rating-module-bg-color: var(--pecking-crow); --rating-module-text-color: var(--barry-magnum); --rating-module-text-hover-color: var(--tyrant-white); } /* FOOTERS AND BELOW */ .page-source { background: rgb(var(--tyrant-white)); font-family: var(--mono-font); } #lock-info, div.note, input.checkbox, input.text, textarea { font-family: var(--body-font); } form#edit-page-form #edit-page-textarea { background-color: rgb(var(--barry-magnum)); } #footer { --footer-bg-color: var(--jills-shoulderpads); --footer-text-color: var(--barry-magnum); --footer-link-color: var(--barry-magnum); --footer-link-hover-color: var(--tyrant-white); --footer-link-hover-bg-color: var(--chris-blood); } #license-area { --license-bg-color: var(--weskers-shades); --license-text-color: var(--barry-magnum); --license-link-color: var(--barry-magnum); --license-link-hover-color: var(--tyrant-white); --license-link-hover-bg-color: var(--chris-blood); } /* TOGGLE SIDEBAR (BHL) CHANGES */ @supports(display: grid) { @media only screen and (min-width: 769px) { #main-content::before { background: rgba(var(--dark-stars-blue), .45) 1px 1px repeat; } } } #side-bar:hover, #side-bar:active { scrollbar-color: rgb(var(--umbrella-red)) rgb(var(--weskers-shades), 1); border-color: rgba(var(--umbrella-red), 1); } #side-bar::-webkit-scrollbar-track, #side-bar:hover::-webkit-scrollbar-track { background-color: rgb(var(--weskers-shades)); } #side-bar::-webkit-scrollbar-thumb { background-color: rgb(var(--umbrella-red)); } #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgb(var(--chris-blood)); }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; background: unset; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; pointer-events: none; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after { opacity: 0; pointer-events: none; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar { padding: inherit; } } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @supports (-webkit-hyphens:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } }